<template>
	<div class="soaring-boader">
		<div class="nav-head">
			<router-link to="/boader"><img src="../../../../assets/icon-return45.png"></router-link>
			<div class="title">飙升榜</div>
			<div class="boader-info">
				<div>
					<img src="../../../../assets/icon-love.png">
					<p><span>82.5</span>万</p>
				</div>
				<div>
					<img src="../../../../assets/icon-pinglun.png">
					<p><span>45632</span></p>
				</div>
				<div>
					<img src="../../../../assets/icon-share.png">
					<p><span>4532</span></p>
				</div>
				<div>
					<img src="../../../../assets/icon-download@2x32.png">
					<p><span>89.5</span>万</p>
				</div>
			</div>
		</div>
		<div class="top-blank"></div>
		<div class="soaring-boader-wraper">
			<div class="soaring-boader-nav">
				<span :class="{'active-nav':selectSong}" @click="SelectSong">歌曲</span>
				<span :class="{'active-nav':selectDetaile}" @click="SelectDetaile">详情</span>
			</div>
			<div class="soaring-boader-list">
				<div class="soaring-boader-info">
					<div class="songs-info">
						<p class="song-name">心愿便利贴</p>
						<p class="song-singer">时致</p>
					</div>
					<div class="share-btn"><img src="../../../../assets/icon-pull@2x32.png"></div>
					<div class="mv-btn"><router-link to="/MV"><img src="../../../../assets/mv-logo-singer.png"></router-link></div>
				</div>
				<div class="soaring-boader-info">
					<div class="songs-info">
						<p class="song-name">算什么男人</p>
						<p class="song-singer">周杰伦</p>
					</div>
					<div class="share-btn"><img src="../../../../assets/icon-pull@2x32.png"></div>
					<div class="mv-btn"><router-link to="/MV"><img src="../../../../assets/mv-logo-singer.png"></router-link></div>
				</div>
				<div class="soaring-boader-info">
					<div class="songs-info">
						<p class="song-name">天黑黑</p>
						<p class="song-singer">孙燕姿</p>
					</div>
					<div class="share-btn"><img src="../../../../assets/icon-pull@2x32.png"></div>
					<div class="mv-btn"><router-link to="/MV"><img src="../../../../assets/mv-logo-singer.png"></router-link></div>
				</div>
				<div class="soaring-boader-info">
					<div class="songs-info">
						<p class="song-name">一夜成长</p>
						<p class="song-singer">于文文</p>
					</div>
					<div class="share-btn"><img src="../../../../assets/icon-pull@2x32.png"></div>
					<div class="mv-btn"><router-link to="/MV"><img src="../../../../assets/mv-logo-singer.png"></router-link></div>
				</div>
				<div class="soaring-boader-info">
					<div class="songs-info">
						<p class="song-name">算什么男人</p>
						<p class="song-singer">周杰伦</p>
					</div>
					<div class="share-btn"><img src="../../../../assets/icon-pull@2x32.png"></div>
					<div class="mv-btn"><router-link to="/MV"><img src="../../../../assets/mv-logo-singer.png"></router-link></div>
				</div>
				<div class="soaring-boader-info">
					<div class="songs-info">
						<p class="song-name">跳舞的梵谷</p>
						<p class="song-singer">孙燕姿</p>
					</div>
					<div class="share-btn"><img src="../../../../assets/icon-pull@2x32.png"></div>
					<div class="mv-btn"><router-link to="/MV"><img src="../../../../assets/mv-logo-singer.png"></router-link></div>
				</div>
				<div class="soaring-boader-info">
					<div class="songs-info">
						<p class="song-name">晴天</p>
						<p class="song-singer">周杰伦</p>
					</div>
					<div class="share-btn"><img src="../../../../assets/icon-pull@2x32.png"></div>
					<div class="mv-btn"><router-link to="/MV"><img src="../../../../assets/mv-logo-singer.png"></router-link></div>
				</div>
				<div class="soaring-boader-info">
					<div class="songs-info">
						<p class="song-name">醉赤壁</p>
						<p class="song-singer">周杰伦</p>
					</div>
					<div class="share-btn"><img src="../../../../assets/icon-pull@2x32.png"></div>
					<div class="mv-btn"><router-link to="/MV"><img src="../../../../assets/mv-logo-singer.png"></router-link></div>
				</div>
			</div>
		</div>
		<div class="blank"></div>
		<!-- <musicPlayer></musicPlayer> -->
	</div>
</template>
<script>
	import musicPlayer from '../../../../components/music_player'
	export default{
		name:"soaringBoader",
		data(){
			return{
				selectSong:true,
				selectDetaile:false
			}
		},
		components:{
			musicPlayer
		},
		methods:{
			SelectSong(){
				this.selectSong = true;
				this.selectDetaile = false;
			},
			SelectDetaile(){
				this.selectSong = false;
				this.selectDetaile = true;
			}
		}
	}
</script>
<style scoped lang="less">
.blank{
	width: 100%;
	height: 108 / 100rem;
}
.top-blank{
	width: 100%;
	height: 428 / 100rem;
}
.nav-head{
	width: 100%;
	height: 428/100rem;
	background:url('../../../../assets/soaring-boader-pic1.png');
	background-size: 100%;
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
	.boader-info{
		width: 710 / 100rem;
		margin: 0 auto;
		margin-top: 79 / 100rem;
		overflow: hidden;
		color: #fff;
		div{
			float: left;
			width: 25%;
			text-align: center;
			img{
				height: 32 / 100rem;
			}
			p{
				margin-top: 22 / 100rem;
				font-size: 24 / 100rem;
			}
		}
	}
}
.nav-head>a>img{
	display: block;
	width: 27/100rem;
	height: 45/100rem;
	position: absolute;
	left: 20/100rem;
	top: 21.5/100rem;
}
.nav-head .title{
	width: 100%;
	text-align: center;
	font-size: 102/100rem;
	color: #fff;
	margin-top: 151 / 100rem;
}	
.soaring-boader-wraper{
	background-color: #dbd7df;
	width: 100%;
	position: relative;
	z-index: 11;
	.soaring-boader-nav{
		background-color: #fff;
		width: 100%;
		display: flex;
		span{
			flex:1;
			padding-top: 32 / 100rem;
			padding-bottom: 10 / 100rem;
			border-bottom: 4 / 100rem solid #fff;
			font-size: 30 / 100rem;
			text-align: center;
		}
		.active-nav{
			color:#c995f5;
			border-bottom: 4 / 100rem solid #c995f5;
		}
	}
	.soaring-boader-list{
		width: 100%;
		overflow: hidden;
		margin-top: 9 / 100rem;
		.soaring-boader-info{
			background-color: #fff;
			overflow: hidden;
			padding-top: 18 / 100rem;
			padding-left: 20 / 100rem;
			margin-bottom: 2 / 100rem;
			.songs-info{
				float: left;
				font-size: 24 / 100rem;
				.song-name{
					padding-bottom: 22 / 100rem;
				}
				.song-singer{
					padding-bottom: 10 / 100rem;
					color: #666;
				}
			}
			.mv-btn{
				float: right;
				width: 54 / 100rem;
				height: 26 / 100rem;
				margin-top: 38 / 100rem;
				margin-right: 67 / 100rem;
				img{
					width: 100%;
				}
			}
			.share-btn{
				float: right;
				width: 33 / 100rem;
				height: 9 / 100rem;
				margin-top: 45 / 100rem;
				margin-right: 20 / 100rem;
				position: relative;
				img{
					width:100%; 
					position: absolute;
				}
			}
		}
	}
}
</style>